<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-10 14:29:52
 * @LastEditTime: 2025-09-17 20:06:02
 * @LastEditors: sueRimn
-->

<template>
  <view class="card">
    <view class="body">
      <view class="strategy-guide" @click="goStrategyGuide">
        <image src="https://image.chushouya.com/assets/images/product/icon_gl@2x.png" mode="aspectFill"></image>
        <text>拿钱攻略</text>
      </view>
      <view class="amount d-flex flex-column">
        <view>今日最高可得(元)</view>
        <view class="price" v-if="recoveryMode == 0">
          {{ displayPrice }}
        </view>
        <view class="price" v-else>{{ displayPrice }}</view>
      </view>
      <view class="coupon">
        <text>原价回收{{ basePrice }}</text>
        <text v-if="selectCoupon.bonusValue > 0">，已加价{{ selectCoupon.bonusValue }}</text>
        <image v-if="selectCoupon.bonusValue > 0" src="https://image.chushouya.com/assets/images/product/icon_up@2x.png"
          mode="aspectFill"></image>
      </view>
      <view class="line"></view>
      <view class="header d-flex justify-content-between">
        <text class="name">{{ evaluate.productName }}</text>
        <view class="reback" @click="handleGoBack">
          <text>重新估价</text>
          <image src="https://image.chushouya.com/assets/images/product/icon_refresh@2x.png" mode="aspectFill"
            class="reback-icon"></image>
        </view>
      </view>
    </view>
    <view class="handle-today-bg" v-if="showSurprise && selectCoupon.bonusValue > 0">
      <view class="handle-today">
        <view class="mark-up">
          <text>¥</text>{{ selectCoupon.bonusValue }}
        </view>
        <view class="only">{{ selectCoupon.bonusName }}</view>
        <view class="count-down">
          <text>有效期</text>
          <view class="time"><text class="number">{{ countdown.hours }}</text><text class="dot">:</text><text
              class="number">{{ countdown.minutes }}</text><text class="dot">:</text><text
              class="number">{{ countdown.seconds }}</text></view>
        </view>
        <view class="btn" @click="showSurprise = false"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import dayjs from "dayjs";

export default {
  props: {
    evaluate: { type: Object, default: { evaluatePrice: 0 } },
    basePrice: { type: Number, default: 0 },
    displayPrice: { type: Number, default: 0 },
    selectCoupon: { type: Object, default: { bonusValue: 0 } },
    couponList: { type: Array, default: [] }
  },
  data() {
    return {
      showSurprise: true
    };
  },

  computed: {
    ...mapGetters([
      'countdown', 'recoveryMode'
    ]),
    dorp() {
      return parseInt(this.basePrice * 0.0132);
    }
  },

  methods: {
    handleGoBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        uni.navigateTo({
          url: `/pages/product/index?id=${this.evaluate.productId}`,
        });
      }
    },
    //價格說明
    handlePrice() {
      uni.showToast({
        title: "价格说明",
        icon: "none",
      });
    },
    //安心卖
    handleAnxin() {
      uni.showToast({
        title: "安心卖",
        icon: "none",
      });
    },
    //已选机框
    handleAttr() {
      uni.showToast({
        title: "已选机况",
        icon: "none",
      });
    },
    goStrategyGuide() {
      uni.navigateTo({
        url: "/pages/help/index"
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  padding: 16rpx 32rpx 26rpx;
  position: relative;
  background: url('https://image.chushouya.com/assets/images/product/img_bg@2x.png') no-repeat center;
  // background: url('https://image.chushouya.com/assets/images/product/img_bg@2x.png') no-repeat center;
  background-size: 100% 100%;
  margin-top: 32rpx;

  .header {
    .name {
      display: inline-block;
      font-size: var(--hui-font-size-26);
      overflow: hidden;
      font-weight: bold;
      color: rgba(48, 35, 0, 0.5);
    }

    .reback {
      color: rgba(48, 35, 0, 0.5);
      font-size: var(--hui-font-size-24);

      .reback-icon {
        width: 32rpx;
        height: 32rpx;
        margin-left: 4rpx;
        vertical-align: middle;
      }

      text {
        vertical-align: middle;
        display: inline-block;
      }
    }
  }

  .body {
    .strategy-guide {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #b18302;
      position: absolute;
      width: fit-content;
      top: 16rpx;
      right: 32rpx;

      image {
        width: 28rpx;
        height: 30rpx;
        margin-right: 8rpx;
        vertical-align: middle;
      }

      text {
        vertical-align: middle;
        display: inline-block;
      }
    }

    .amount {
      margin: 98rpx 0 0 0;
      text-align: center;

      .price {
        font-family: Barlow, Barlow;
        font-weight: 600;
        font-size: 100rpx;
        color: #261c00;

        .yuan {
          font-size: 48rpx;
          margin-bottom: 2rpx;
        }

        .value {
          font-size: 80rpx;
        }
      }
    }

    .coupon {
      background: url(https://image.chushouya.com/assets/images/product/img_tip@2x.png) no-repeat center;
      background-size: 100% 100%;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #c6950d;
      width: 450rpx;
      height: 74rpx;
      line-height: 80rpx;
      margin: 6rpx auto 36rpx;

      image {
        width: 20rpx;
        height: 24rpx;
        vertical-align: middle;
        margin-left: 4rpx;
      }

      text {
        vertical-align: middle;
        display: inline-block;
      }
    }

    .line {
      width: 100%;
      border-bottom: 2rpx dashed rgba(211, 167, 46, 0.4);
      margin-bottom: 22rpx;
    }
  }

  .drop {
    font-size: var(--hui-font-size-24);
    color: var(--hui-color-subtitle);
  }

  .handle-today-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;

    .handle-today {
      text-align: center;
      width: 600rpx;
      height: 712rpx;
      background: url(https://image.chushouya.com/assets/images/product/img_pop@2x.png) no-repeat center;
      background-size: 100% 100%;
      padding-top: 186rpx;
      margin: 0 auto;

      .mark-up {
        font-family: Barlow, Barlow;
        font-weight: 600;
        font-size: 136rpx;
        color: #FF2727;
        line-height: 140rpx;

        text {
          font-size: 92rpx;
        }
      }

      .only {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #FF2727;
        margin-top: 2rpx;
      }

      .count-down {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #FF2727;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 48rpx;

        .time {
          font-family: DOUYINSANSBOLD, DOUYINSANSBOLD;
          font-weight: normal;
          font-size: 24rpx;
          color: #FFFFFF;
          margin-left: 12rpx;

          .number {
            display: inline-block;
            width: 32rpx;
            height: 32rpx;
            line-height: 32rpx;
            text-align: center;
            background: #FF2E38;
            border-radius: 6rpx;
          }

          .dot {
            display: inline-block;
            width: 14rpx;
            color: #FF2E38;
          }
        }
      }

      .btn {
        width: 404rpx;
        height: 132rpx;
        background: url(https://image.chushouya.com/assets/images/product/button@2x.png) no-repeat center;
        background-size: 100% 100%;
        margin: 86rpx auto 0;
      }
    }
  }
}
</style>
